<template>

  <div class="formBox">
    <div class="formItem">
      <h5>基本信息</h5>
      <div class="descriptions-box">
        <el-descriptions >
          <el-descriptions-item label="计划编号：">{{ details.number }}</el-descriptions-item>
          <el-descriptions-item label=" 每亩产量目标：">{{ details.targetYield }}(kg)</el-descriptions-item>
          <el-descriptions-item label="预算成本：">{{ details.totalBudgetFee ? details.totalBudgetFee.standardString : ''
          }}(元)</el-descriptions-item>
          <el-descriptions-item label="作物品种：">{{ details.cropName }}，{{ details.cropSeriesName }}</el-descriptions-item>
          <el-descriptions-item label="种植周期：">{{ formatDate(details.planStartTime) }} ~ {{ formatDate(details.planEndTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="种植面积：">{{ details.totalLandArea }}(亩)</el-descriptions-item>
          <el-descriptions-item label="状态："> {{ details.statusMeaning }}
          </el-descriptions-item>
          <el-descriptions-item label="耕种方式：">{{ details.tillageWayMeaning }}</el-descriptions-item>
          <el-descriptions-item label="再生稻管理：">{{ details.isZaisheng?'是':'否'}}</el-descriptions-item>
          <el-descriptions-item label="创建人：">{{ details.realName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间：">{{ details.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div v-for="dt in details.tancStageRspList" :key="dt.stageId" class="formItem">
           <h5>{{ dt.stageName }}</h5>
            <vxe-table 
                  :border="true"
                  :min-height="80"
                  size="small"  
                  :data="dt.tancPlantingPlanTaskRspList||[]">
                  <vxe-column type="seq" width="5%" title="序号" align="center"></vxe-column>
                  <vxe-column field="taskName" title="作业事项" :show-overflow="true" :width="printType?'5%':'10%'"></vxe-column>
                  <vxe-column field="label" title="选择地块" :width="printType?'5%':'10%'">
                    <template #default="{row}">
                      <div   @click="openMap(row)" style="cursor: pointer;">
                        <span><b style="color: #FF9C00;">{{ row.landCount }}</b></span>地块，
                        <span><b style="color: #FF9C00;">{{ row.landArea }}</b></span>亩
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column field="taskContent" title="作业内容" :width="printType?'10%':'35%'" :show-overflow="false"></vxe-column>
                  <vxe-column field="budgetFee.standardString" title="预算费用(元)" :width="printType?'5%':'10%'"></vxe-column> 
                  <vxe-column field="subtotalExecAmount.standardString" title="负责人" :width="printType?'5%':'10%'">
                    <template #default="{row}">
                      <span v-for="(dt4, num4) in JSON.parse(row.fuzeUserJstr||'{}')?.fzuserLineRspList" :key="dt4.userId" style="color: #333;">
                        {{dt4.realName}}
                        <template v-if="num4 < JSON.parse(row.fuzeUserJstr||'{}').fzuserLineRspList.length - 1">、</template>
                      </span>
                    </template>  
                  </vxe-column>
                  <vxe-column field="taskStartTime" title="完成日期" :width="printType?'5%':'12%'">
                    <template #default="{row}">
                      {{ formatDate(row.taskStartTime) }} ~ {{ formatDate(row.taskEndTime) }}
                    </template>
                  </vxe-column>
                  <vxe-column field="taskStatus" title="状态" :width="printType?'5%':'8%'">
                    <template #default="{row}">
                      <template v-if="row.taskStatus == 'DQR'">
                        <el-button  type="text" plain @click="lineConfirm(row)">{{row.taskStatusMeaning}}</el-button>
                      </template>
                      <template v-else>
                          <span  v-if="row.taskStatus" style="color: #666;">{{row.taskStatusMeaning}}</span>
                      </template>
                    </template>  
                  </vxe-column>
              </vxe-table> 
      </div>

      <div v-show="selectLandVis" class="landMap">
        <div class="map-box">
            <farm-land-select
              :showFooter="false"
              @onInitMap="changeMapWidth"
              :plantingPlanId="details.plantingPlanId"
              :openCount="openCount"
              :selectList ="selectList"
              @close="selectLandVis = false" />
          </div> 
      </div>
  </div>
</template>
<script setup>
import { ref, onMounted,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'
import { get_plant_batch_confirm} from '@/api/plant'
import { ElMessageBox } from 'element-plus'
import { message } from '@/utils/element'
import { formatDate } from '@/utils/format'
import farmLandSelect from './../select-land.vue'
import delImg from '@/assets/warning.png'
const router = useRouter()
const route = useRouter()
const userStore = useUserStore()

const props = defineProps({
  details: {
    type: Object,
    default: {}
  },
  stages: {
    type: Array,
    default: []
  },
  printType:Boolean,
  fn: Function
})
onMounted(()=>{
})

const selectLandVis = ref(false)
const selectList = ref([])
let mapWidthView = null
const openCount= ref(0)
const changeMapWidth=(map)=>{
  mapWidthView=map
}

const openMap =(jsonStr)=>{
  let list = JSON.parse(jsonStr.farmLandIdJstr||'[]')||[]
  selectLandVis.value = true
  setTimeout(() => {
    selectList.value =list
  }, 200);
  window.setTimeout(() => {
    mapWidthView.resize()
  },30)
}

const lineConfirm = (plantLineItem) => {
  ElMessageBox.confirm('<div style="height:200px;width:100%;background-color:#f7f7f7;text-align: center;"><img style="padding:40px 0 0 0;height:40px" src="' + delImg + '" /> <div style="font-size: 16px;text-align: center;padding: 10px;font-weight: 600;">确认方案吗?</div><div style="font-size: 14px;text-align: center;color:#666">确认方案后系统生成农事</div></div>', '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      cancelButtonClass: 'cancelButtonClass',
      confirmButtonClass: 'confirmButtonClass',
      dangerouslyUseHTMLString: true,
      type: 'none',
    }
  ).then(async () => {
    const res = await get_plant_batch_confirm([plantLineItem.plantingPlanTaskId])
    if (res.code === 0 || res.success) {
      message('操作成功', 2)
      props.fn()
    } else {
      message(res.message || '出错了', 3)
    }
  })
}

</script>
<style>
.descriptions-box {
  margin-top: 10px;
  background-color: #f7f7f7;
  padding: 10px 20px;
  border: 1px solid #eee;
}

.descriptions-box table {
  background-color: #f7f7f7;
}

.descriptions-box table .el-descriptions__label {
  font-weight: 500;
  position: relative;
  font-size: 14px;
  text-indent: 10px;
  margin-right: 2px;
}

.descriptions-box table .el-descriptions__label::before {
  content: '';
  display: block;
  width: 6px;
  background: #999;
  height: 6px;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: -10px;
}
.el-popper{
  max-width: 500px;
}
</style>

<style lang="scss" scoped>
.landMap {
  height: calc(100vh - 90px);
  overflow: hidden;
  width: calc(100vw - 300px);;
  position: fixed;
  left:260px;
  top:60px;
  z-index:99;
  margin:10px;
  .map-box{
    background-color: #fff;
    padding:10px;
  }
}
.landMap::after{
  content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #0000003d;
    z-index: -1;
    top: 0;
    left: 0;
}
.formBox {
  margin: 0;
  position: relative;
  .formItem {
    &+.formItem {
      margin-top: 20px;
    }

    h5 {
      display: flex;
      font-size: 16px;
      align-items: center;
      height: 26px;
      margin: 0;
      padding: 0 0 4px 0;
      color: #333;
      text-indent: 4px;
      border-bottom: 1px solid #ededed;
      margin-bottom: 10px;

      &::before {
        content: '';
        display: block;
        width: 3px;
        background: #FF9C00;
        height: 16px;
        margin: 0 3px 0 0;
      }

      span {
        font-weight: normal;
      }
    }

    .inputItem {
      display: flex;
      align-items: center;
      margin: 5px 0 0 0;

      .lable {
        span {
          color: #f70808;
        }
      }
    }

    .mytips {
      font-size: 12px;
      color: #999;
      -ms-transform: scale(0.95);
      /* IE 9 */
      -webkit-transform: scale(0.95);
      /* Safari */
      transform: scale(0.95);
      /* 标准语法 */
      -webkit-origin: 0 0;
      transform-origin: 0 0;
      margin: 10px 0 10px 0;
    }

    .itemTableBox {
      width: 100%;
      min-width: 1150px;
      border: 1px solid #ddd;
      border-collapse: collapse;

      th,
      td {
        text-align: left;

        span {
          color: #f70808;
        }
      }

      th {
        background-color: #f7f7f7;
        height: 30px;
        padding: 4px 8px;

        &+th {
          border-left: 1px solid #ddd;
        }
      }

      td {
        text-align: left;
        padding: 10px 8px;
        border-top: 1px solid #ddd;
        position:relative;
        &+td {
          border-left: 1px solid #ddd;
        }

        .lk {
          color: #333;
          font-size: 14px;
          text-decoration: underline;
          span{
            color: #FF9C00;
          }
          &:hover {
            text-decoration: underline;
            color: #FF9C00;
            span{
              color: #FF9C00;
            }
          }
        }
        .taskContent{
          text-align: left;
          text-overflow: -o-ellipsis-lastline;
          height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .tbItemFlex {
        display: flex;
        align-items: center;

        .el-icon {
          cursor: pointer;

          &:hover {}
        }
      }
    }
  }

  .cbjs {
    padding: 15px 0 0 0;

    b {
      font-size: 16px;
    }
  }
}</style>
